@reference "./app.css";

/*
using the components layer here because we use use code html and we also want to override these default styles sometimes
https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes
*/
@layer components {
  code {
    display: inline;
    @apply rounded-sm bg-white/10 px-1 py-0.5 text-[0.85em] !font-normal text-white;
  }
  .markdown-content a code {
    @apply text-orange rounded-sm px-1 py-0.5 text-[0.85em] !font-normal;
  }
  pre > code {
    display: grid;
    @apply border-0 bg-transparent text-[1em];
  }
  .highlighted {
    position: relative;
    @apply bg-blue-700/50;
  }
  .highlighted-add {
    position: relative;
    @apply bg-green-700/50;
  }
  .highlighted-modified {
    position: relative;
    @apply bg-yellow-500/30;
  }
  .highlighted-remove {
    position: relative;
    @apply bg-red-700/50;
  }
  pre {
    counter-reset: line;
  }
  pre code span.line {
    counter-increment: line;
    padding-right: 1ch;
  }
  pre code span.line:before {
    content: counter(line);
    display: inline-block;
    width: calc(2ch + 1rem);
    text-align: right;
    color: #ccc;
    user-select: none;
    opacity: 0.3;
    margin-left: 0.3ch;
    @apply mr-2 h-full border-r border-[#ccc]/50 pl-0 pr-2 text-[0.9em];
  }
  pre code span.line.highlighted-add:before {
    content: '+';
    opacity: 1;
  }
  pre code span.line.highlighted-remove:before {
    content: '-';
    opacity: 1;
  }
  pre code span.line.highlighted-modified:before {
    content: 'M';
    opacity: 1;
  }
}
